<!--
 * @Date: 2022-06-15 09:26:30
 * @Author: 陶子
 * @LastEditTime: 2023-05-17 15:17:48
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\warehouseManagement\goodsManagement\goodsManagementList.vue
 * @pageName: 这是--(物品管理)--页面
-->
<template>
  <div>
    <div class="room-content">
      <Navbar :appTitle="appTitle" />
      <Search style='padding-top:0.1rem' ref="topSearch" class="search" placeholder="物品名称|物品编号|规格" :isAdd="true" :isScreen="true" @onSearch="onSearch"
        @onScreen="onScreen" @newBuild='newBuild("add",null)'></Search>
      <div class="outBox">
        <van-dropdown-menu active-color="#1989fa" style="width:50%">
          <van-dropdown-checkbox title="物品类型" :key='selecKeyType' :selectValue='valueType' :columns="goodTypeList" @comfirm="typeChange">
          </van-dropdown-checkbox>
        </van-dropdown-menu>
        <div class="capitalflow-topl" @click.stop='clickClassification'>
          <span>{{dropdownObj.categoryText?dropdownObj.categoryText:'物品分类'}}</span>
        </div>
      </div>
      <search-tag ref="SearchTag" @getCategory="getCategory">
      </search-tag>
      <!--分页列表 -->
      <div class="listBox">
        <pageList @handleList='handleList' ref="pageList" :checkedShow="false" :columns="columns" :listUrl="listUrl">
          <div class="rt-column" slot="body" slot-scope="{ item }">
            <div class="rt-row">
              <div class="column">
                <span class="column-t">编号：</span>
                <span class="column-c">{{item.goodsCode|| '--' }}</span>
              </div>
            </div>
            <div class="rt-row">
              <div class="column">
                <span class="column-t">规格：</span>
                <span class="column-c">{{item.spec|| '--' }}</span>
              </div>
            </div>
            <div class="rt-row">
              <div class="column">
                <span class="column-t">类型：</span>
                <span class="column-c">{{item.typeText|| '--' }}</span>
              </div>
            </div>
          </div>
          <div slot="foot" slot-scope="{item}" class="operateBox">
            <div class="pubBtn" v-if="item.flowStatus == 'RUNNING' && item.createBy == loginUser" @click.stop="handleWithdraw(item)">撤回</div>
            <div class="pubBtn" @click.stop="newBuild('edit',item)" v-if="item.status == 'effective'">编辑</div>
            <div class="pubBtn" @click.stop="deleteItem(item)" v-if="item.flowStatus != 'RUNNING'">删除</div>
          </div>
        </pageList>
      </div>
      <!-- dialog弹框 -->
      <van-dialog v-model="showDialog" show-cancel-button confirm-button-color="#1890FF" @confirm='dialogConfirm'>
        <div slot="title" class="dialogContentBox">
          <van-icon name="question-o" size="0.20rem" color="#FF943E" /><span style="margin-left: 0.07rem">{{operateInfo.title}}</span>
        </div>
        <div style="margin: 0.1rem 0.46rem 0.3rem 0.46rem; color: #888888">
          {{operateInfo.content}}
        </div>
        <div style="background: #f0f0f0; width: 100%; height: 0.01rem"></div>
      </van-dialog>
    </div>
    <van-popup v-model="showTree" position="bottom">
      <div class="van-picker__toolbar">
        <button type="button" class="van-picker__cancel" @click="confirmTree">取消</button>
        <button type="button" class="van-picker__confirm" @click="confirmTree">确认</button>
      </div>
      <van-tree-select :items="categoryList" :active-id="dropdownObj.category" :main-active-index.sync="activeIndex" @click-item="clickItem" />
    </van-popup>
  </div>
</template>
<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
import { APILX } from "@/api/requestLx";
import { getDictModel, categoryGetTree } from "@/api/system.js";
import { goodsLogicDel } from "@/api/mobile";
import VanDropdownCheckbox from "@/views/workManagement/defectsDeal/VanDropdownCheckbox";
import { getEnableOne } from "@/api/api";
export default {
  name: "carRoomList",
  components: {
    Navbar,
    TabBar,
    pageList,
    Search,
    SearchTag,
    VanDropdownCheckbox,
  },
  data() {
    return {
      activeIndex: 0,
      showTree: false,
      selecKeyType: 1,
      valueType: [],
      goodTypeList: [],
      categoryList: [],
      listUrl: "/wms/goods/list", //列表接口
      columns: {
        titleKey: "goodsName", //标题
        labelKey: ["flowStatusName", "statusText"], //标签
      },
      keyword: "",
      appTitle: "物品管理",
      loginUser: "",
      showDialog: false,
      itemInfo: {},
      operateInfo: {
        title: "",
        content: "",
        type: "",
      },
      dropdownObj: {
        type: "",
        category: "",
        categoryText: "",
      },
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.$refs.SearchTag.showSearchTag) {
      this.appTitle = "物品管理";
      this.$refs.SearchTag.showSearchTag = false;
      next(false);
    } else {
      next();
    }
  },
  created() {
    let user = localStorage.getItem("pro__Login_Userinfo");
    this.loginUser = JSON.parse(user).value.id;
    this.appTitle = "物品管理";
    getEnableOne({ id: "WMS_GOODS", type: "add" }).then((res) => {
      if (res.result && res.result == "false") {
        this.columns.labelKey.shift();
      }
    });
    this.getBasicData();
  },
  mounted() {
    let searchObj = {
      keyword: this.keyword,
    };
    this.searchQuery(searchObj);
  },
  methods: {
    getBasicData() {
      // 类型字典
      let parameters = { dictCode: "wms_goods_type" };
      getDictModel(parameters).then((res) => {
        if (res.code == 200) {
          this.goodTypeList = res.result;
        }
      });
      // 取分类树
      categoryGetTree({ code: "B05" }).then((res) => {
        this.categoryList = res.result[0].children;
        if (this.categoryList.length > 0) {
          this.recursion(this.categoryList);
        }
      });
    },
    recursion(newArray) {
      newArray.forEach((item) => {
        item.text = item.name;
        if (item.children.length > 0) {
          this.recursion(item.children);
        }
      });
    },
    clickItem(v) {
      this.dropdownObj.categoryText = v.text;
      this.dropdownObj.category = v.id;
      this.dropDownChang();
    },
    confirmTree() {
      this.showTree = false;
    },
    clickClassification() {
      this.showTree = true;
    },
    typeChange(v) {
      this.valueType = v.split(",");
      this.valueType = this.valueType.filter((item) => item);
      this.dropdownObj.type = v;
      this.selecKeyType += 1;
      this.dropDownChang();
    },
    dropDownChang() {
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    // 删除操作
    deleteItem(v) {
      this.itemInfo = v;
      this.operateInfo.title = "确定删除吗？";
      this.operateInfo.content = "删除后不可恢复";
      this.operateInfo.type = "delete";
      this.showDialog = true;
    },
    /* 撤回 */
    handleWithdraw(v) {
      this.itemInfo = v;
      this.operateInfo.title = "确定撤回吗？";
      this.operateInfo.content = "撤回申请将被拒绝";
      this.operateInfo.type = "revocation";
      this.showDialog = true;
    },
    //确定撤回 || 删除
    dialogConfirm() {
      let operateType = this.operateInfo.type;
      if (operateType == "revocation") {
        APILX.operateRevoke({ flowInstId: this.itemInfo.flowInstId }).then(
          (res) => {
            if (res.code == 200) {
              this.$toast(res.message);
              let searchObj = {
                ...this.dropdownObj,
                keyword: this.keyword,
              };
              this.searchQuery(searchObj);
            } else {
              this.$toast(res.message);
            }
          }
        );
      } else {
        goodsLogicDel({ id: this.itemInfo.id }).then((res) => {
          if (res.code == 200) {
            this.$toast(res.result);
            let searchObj = {
              ...this.dropdownObj,
              keyword: this.keyword,
            };
            this.searchQuery(searchObj);
          } else {
            this.$toast(res.message);
          }
        });
      }
    },
    newBuild(type, itemInfo) {
      if (type == "add") {
        this.$router.push({
          path: "/warehouseManagement/goodsManagement/goodsManagementAdd",
        });
      } else {
        this.$router.push({
          path: "/warehouseManagement/goodsManagement/goodsManagementAdd",
          query: { id: itemInfo.id },
        });
      }
    },
    //列表点击更多按钮事件
    handleList(id, item, type) {
      if (type == "列表") {
        this.$router.push({
          path: "/warehouseManagement/goodsManagement/goodsManagementDetail",
          query: {
            id,
          },
        });
      }
    },
    onSearch(v) {
      this.keyword = v;
      let searchObj = {
        ...this.dropdownObj,
        keyword: this.keyword,
      };
      this.searchQuery(searchObj);
    },
    onScreen() {
      this.appTitle = "更多筛选";
      this.keyword = this.$refs.topSearch.value;
      let pramsObj = JSON.parse(JSON.stringify(this.dropdownObj));
      pramsObj.keyword = this.keyword;
      this.$refs.SearchTag.showModal(
        this.keyword,
        pramsObj,
        this.goodTypeList,
        this.categoryList,
        this.activeIndex
      );
    },

    getCategory(sureObj) {
      this.appTitle = "物品管理";
      this.keyword = sureObj.keyword;
      this.$refs.topSearch.value = sureObj.keyword;
      this.dropdownObj = JSON.parse(JSON.stringify(sureObj));
      this.valueType = this.dropdownObj.type
        ? this.dropdownObj.type.split(",")
        : [];
      this.searchQuery(sureObj);
    },
    // 搜索
    searchQuery(searchObj) {
      let params = {
        ...searchObj,
      };
      this.$refs.pageList.searchQuery(params);
    },
  },
};
</script>
<style lang="less" scoped>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.room-content {
  height: 100vh;
  overflow-y: scroll;
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
}
.listBox {
  height: calc(100vh - 1.5rem);
  overflow-y: auto;
}
.operateBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding-right: 0.07rem;
  font-size: 0.14rem;
  font-weight: 500;
  color: #1890ff;
}
.dialogContentBox {
  text-align: left;
  margin: 0.1rem 0.19rem;
  color: #191f25;
  font-size: 0.16rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pubBtn {
  margin-right: 0.12rem;
  &:nth-last-child(1) {
    margin-right: 0;
  }
}
.van-popup {
  border-radius: 20px 20px 0 0;
}
/deep/.bebox {
  z-index: 2;
}
/deep/.van-sidebar-item--select::before {
  color: #1890ff;
  background-color: #1890ff;
}
/deep/.van-tree-select__item--active {
  color: #1890ff;
}

.capitalflow-topl {
  width: 50%;
  .flex( center,center);
  span {
    display: block;
    position: relative;
    font-size: 15px;
  }
  span::after {
    position: absolute;
    top: 50%;
    right: -0.15rem;
    margin-top: -5px;
    border: 3px solid;
    border-color: transparent transparent #dcdee0 #dcdee0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
  }
}
.outBox {
  display: flex;
  background-color: #fff !important;
}
/deep/ .van-dropdown-menu__bar {
  box-shadow: 0 0 !important;
}
.rt-column {
  padding: 0.17rem 0 0 0.17rem;
}
.rt-row {
  margin-bottom: 0.1rem;
  .column {
    width: 100%;
    .column-t {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-bottom: 0.03rem;
    }
    .column-c {
      font-size: 0.14rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
    }
  }
}
</style>